import React from "react";
// import Vcode from "react-vcode";
import { Form, Input, Button, Checkbox } from "antd";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";
import Vcode from "react-vcode";
import CanvasBack from "@/components/CanvasBack";
import "./index.less";


function Login(): JSX.Element {
    return (
        <div className="page-login">
            <div className="canvas-box">
                <CanvasBack row={12} col={8} />
            </div>
            <div className="login-box">
                <Form
                    name="basic"
                    wrapperCol={{ span: 24 }}
                    autoComplete="off"
                >
                    <div className="title">
                        <span>React-Admin</span>
                    </div>
                    <Form.Item
                        name="username"
                        rules={[
                            { max: 12, message: "最大长度为12位字符" },
                            {
                              required: true,
                              whitespace: true,
                              message: "请输入用户名",
                            },
                        ]}
                    >
                        <Input 
                            style={{width: "100%"}}
                            prefix={<UserOutlined style={{ fontSize: 12 }} />}
                            size="large"
                            id="username" 
                            placeholder="超级管理员/管理员"
                        />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            { required: true, message: "请输入密码" },
                            { max: 18, message: "最大长度18个字符" },
                        ]}
                        >
                        <Input
                            prefix={<KeyOutlined style={{ fontSize: 12 }} />}
                            size="large"
                            type="password"
                            placeholder="123456/123456"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item
                            name="vcode"
                            noStyle
                            rules={[
                                (): any => ({
                                  validator: (rule: any, value: string): Promise<any> => {
                                    const v = value;
                                    // const v = tools.trim(value);
                                    if (v) {
                                      if (v.length > 4) {
                                        return Promise.reject("验证码为4位字符");
                                      } 
                                      else {
                                        return Promise.resolve();
                                      }
                                    } else {
                                      return Promise.reject("请输入验证码");
                                    }
                                  },
                                }),
                              ]}
                        >
                            <Input
                            style={{ width: "200px" }}
                            size="large"
                            id="vcode" // 为了获取焦点
                            placeholder="请输入验证码"
                            />
                        </Form.Item>
                        <Vcode
                            height={40}
                            width={150}
                            className="vcode"
                            style={{ color: "#f00" }}
                            options={{
                                lines: 16,
                            }}
                        />
                    </Form.Item>
                    <div style={{ lineHeight: "40px" }}>
                        <Checkbox
                            className="remember"
                        >
                            记住密码
                        </Checkbox>
                        <Button
                            className="submit-btn"
                            size="large"
                            type="primary"
                        >
                             登录
                        </Button>
                    </div>
                    <div style={{ lineHeight: "40px" }} className="froget">忘记密码</div>
                </Form>
            </div>
        </div>
    );
}

export default Login;